<template>
    <div>
      <about-us @changeScroll="changeScroll" v-if="type==='aboutUs'" :title="title" :companyClassList="classList"/>
      <Collapse-myProduct @changeScroll="changeScroll"  v-else-if="type==='collapse'" :title="title" :productClassList="classList"/>
      <contact-us v-else :title="title" :contactInfo="classList" :icp_src="navInfo.icp_src"  :icp_title="navInfo.icp_title"/>
    </div>
</template>

<script>
  import aboutUs from '@/components/commonComponents/AboutUs'
  import CollapseMyProduct from '@/components/commonComponents/Collapse_MyProduct'
  import contactUs from '@/components/commonComponents/contactUs'

  export default {
        name: "chooseLinkType",
    props:{
      info:{},
    },
    data(){
          return {
            title:'',
            classList:{},
          }
    },
    computed:{
      navInfo:{
        get(){
          return this.$store.getters.getNavInfo;
        },
        set(){}
      },
      type:{
        get(){
          if(this.info.children.length > 0 && this.info.children[0].type==='link'){
            this.title=this.info.title;
            this.classList=this.info.children;
            return 'aboutUs';
          }
          else if(this.info.children.length > 0 && this.info.children[0].type==='product'){
            this.title=this.info.title;
            this.classList=this.info.children;
            return 'collapse';
          }else{
            this.title=this.info.title;
            this.classList=this.info.children;
            return 'contactUs';
          }
        },
        set(){}
      }
    },
    methods:{
      changeScroll(){
        this.$emit('changeScroll');
      }
    },
      components:{
        aboutUs:aboutUs,
        CollapseMyProduct:CollapseMyProduct,
        contactUs:contactUs,
      }
    }
</script>

<style scoped>

</style>
